<template>
  <div class="nf-wrap">
    <div class="nf-illu-wrap">
      <img class="nf-illu" :src="illuUrl" alt="404" @error="hide($event)" />
    </div>

    <div class="nf-text">
      <h1 class="nf-title">404 Forbidden</h1>
      <p class="nf-desc">你的页面被风吹走了，快去联系开发者找它回来吧</p>
    </div>

    <div class="nf-actions">
      <el-button class="nf-btn" type="primary" size="large" @click="goHome">返回首页</el-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import img404 from '../assets/404.png'
const router = useRouter()
const illuUrl = img404
function hide(e){ e.target.style.opacity = 0 }
function goHome(){ router.push('/') }
</script>

<style scoped>
.nf-wrap{
  width:100%;
  height:calc(100vh - 60px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#333;
  transform: translateY(-49px);
}
.nf-illu{
  width:420px;
  max-width:70vw;
  height:auto;
  margin-bottom:24px;
  object-fit:contain;
}
.nf-title{
  margin:0 0 10px 0;
  font-size:22px;
  font-weight:600;
  color:#333;
}
.nf-desc{
  margin:0 0 18px 0;
  font-size:14px;
  color:#8a8a8a;
}
.nf-btn{
  min-width:120px;
}
.nf-illu-wrap{ display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
.nf-text{ text-align:center; margin-bottom:18px; transform: translateY(-52px); }
.nf-actions{ display:flex; align-items:center; justify-content:center; transform: translateY(-46px); }

</style>